<template>
  <div class="app-container">
    <el-input
    clearable
      v-model="search.id"
      style=" width: 200px;
            padding-left: 10px;
            padding-top: 5px;"
      size="medium"
      placeholder="请输入类目ID"
    />
    <el-input
    clearable
      v-model="search.categoryName"
      style=" width: 200px;
            padding-left: 10px;
            padding-top: 5px;"
      size="medium"
      placeholder="请输入类目名称"
    />
    <!-- <el-select
      v-model="value"
      style=" width: 200px;
          padding-left: 10px;
          padding-top: 5px;"
      size="medium"
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="value"
      style=" width: 200px;
          padding-left: 10px;
          padding-top: 5px;"
      size="medium"
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select> -->
    <el-button  v-hasBtn="'category_search'" type="primary" style="margin-left:10px" size="medium" icon="el-icon-search" @click="searchList()">查找</el-button>
    <el-button  v-hasBtn="'category_add'" type="primary" style="margin-left:10px" size="medium" icon="el-icon-edit" @click="add()">添加</el-button>
    <el-table
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="tableData"
      row-key="id"
      style="width: 100%; margin-top:20px"
      border
      :header-cell-style="{'text-align':'center', 'font-size': '12px'}"
      :cell-style="{'text-align':'center'}"
    >
      <el-table-column
        width="100px"
      />
      <el-table-column
        label="类别名"
        prop="categoryName"
        width="300px"
      >
        <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.categoryName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
      label="图片"
      prop="img"
      width="170px"
    >
      <template slot-scope="scope">
          <img :src="scope.row.img" style="width:40px;">
      </template>
    </el-table-column>
      <!-- <el-table-column
        label="订单状态"
        prop="state"
      >
        <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.state }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        label="级别"
        prop="level"
      >
        <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.level }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="primary"  v-hasBtn="'category_edit'" size="small" @click="detail(scope.row)">编辑</el-button>
          <el-button type="danger"  v-hasBtn="'category_delete'" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- <el-pagination
      background
      style="margin-top: 10px"
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="pageMenu.page.page"
      :page-size="pageMenu.page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @next-click="handleNextChange"
      @prev-click="handlePrevClick"
      @current-change="handleCurrentChange"
    /> -->

    </div>



    <el-dialog title="编辑" :visible.sync="dialogTable">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="类目名称" prop="categoryName">
          <el-input  v-model="ruleForm.categoryName" style="width: 350px;" clearable />

        </el-form-item>

        <el-form-item label="首页显示" prop="homeShow">
          <el-radio-group v-model="ruleForm.homeShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="父目类" prop="parentId">
          <el-select   v-model="ruleForm.parentId" disabled placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片" >
          <el-upload
           action=""
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="submitFileForm"
          :on-change="handleFileChange"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTable = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate()">确 定</el-button>
      </span>
    </el-dialog>




    <el-dialog title="创建" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="类目名称" prop="categoryName">
          <el-input v-model="ruleForm.categoryName" style="width: 350px;" clearable />

        </el-form-item>

        <el-form-item label="首页显示" prop="homeShow">
          <el-radio-group v-model="ruleForm.homeShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="父目类" prop="parentId">
          <el-select v-model="ruleForm.parentId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片" >
          <el-upload
           action=""
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="submitFileForm"
          :on-change="handleFileChange"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search:{
        id: '',
        categoryName : ''
      },
      totalCount: 0,
      totalPages: '',
      pageMenu:{
        page:{
          page: 1,
          pageSize: 1000
        }
      },
      input: '',
      form: {
        parentId: 0,
        categoryName: ''
      },
      ruleForm: {
        id: '',
        parentId: '',
        categoryName: '',
        img: '',
        homeShow:0
      },
      rules: {
        categoryName: [
          { required: true, message: '请输入父类名称', trigger: 'blur' },
        ]
      },
      dialogTableVisible: false,
      dialogTable: false,
      options: [{
        value: '选项1',
        label: '一级目录'
      }, {
        value: '选项2',
        label: '二级目录'
      }],
      tableData: [{
        id: '1',
        name: '品质粮油',
        state: '品质粮油',
        level: '一级类目'
      }, {
        id: '2',
        name: '蔬菜豆菇',
        state: '蔬菜豆菇',
        level: '一级类目'
      }, {
        id: '25',
        name: '时令水果',
        state: '时令水果',
        level: '一级类目'
      }, {
        id: '64',
        name: '鲜肉蛋禽',
        state: '鲜肉蛋禽',
        level: '一级类目'
      }],
      value: '',

    }
  },

  created() {
    this.getList()
  },


  methods: {


    searchList(){

            if (this.search.categoryName === '' && this.search.id === ''){
              this.getList()
            } else {
              let data = {
              relation:{
                conditions:[]
              }
            }

            if (this.search.categoryName){
                data.relation.conditions.push({
                  colName: 'category_name',
                  ruleType: 'like',
                  value: this.search.categoryName
                })
            }

            if (this.search.id !== ''){
                data.relation.conditions.push({
                  colName: 'id',
                  ruleType: 'eq',
                  value: this.search.id
                })
            }

            this.$request({
                url: '/category/tidList',
                method: 'post',
                data: {
                  page: {
                    page: 1,
                    pageSize: 10
                  },
                  order:[{
                      colName: 'category_name',
                      orderType: '',
                  }],
                  relation: data.relation
                }
            }).then(res => {
                  this.tableData = res.data
                  this.options = res.data
                  this.totalCount = res.totalCount
                  this.totalPages = res.totalPages
            })
            }

},



submitFileForm() {
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('fs', file.raw)
      })
      this.$request({
        url: '/file/upload',
        method: 'post',
        data: formData
      }).then(res => {
        if (res.success) {
          this.ruleForm.img = res.data[res.data.length - 1].fileUrl
          this.$notify.success('上传成功')
        } else {
          this.$notify.warning(res.errMessage)
        }
      })
    },

    handleFileChange(file, fileList) {
      this.fileList = fileList
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },




    detail(val){
      this.ruleForm.id = val.id
      this.$request({
          url: '/category/getOne/' + val.id,
          method: 'get'
      }).then(res => {
          this.ruleForm.categoryName = res.data.categoryName
          this.ruleForm.parentId = res.data.parentId
          this.ruleForm.homeShow = res.data.homeShow
      })
      this.dialogTable = true
    },


    getList(){
        this.$request({
            url: '/category/tidList',
            method: 'post',
            data: this.pageMenu
        }).then(res => {
            this.tableData = res.data
            this.options = res.data
            this.totalCount = res.totalCount
            this.totalPages = res.totalPages
        })
    },


    submitUpdate(){
      this.$request({
            url: '/category/update',
            method: 'post',
            data: this.ruleForm
        }).then(res => {
            if (res.success){
                this.$notify.success("成功")
                this.getList()
            } else {
                this.$notify.warning(res.errMessage)
            }
        })
        this.dialogTable = false
    },


    submit(){
        this.$request({
            url: '/category/save',
            method: 'post',
            data: this.ruleForm
        }).then(res => {
            if (res.success){
                this.$notify.success("成功")
                this.getList()
            } else {
                this.$notify.warning(res.errMessage)
            }
        })
        this.dialogTableVisible = false
    },



    del(val){
     
      this.$confirm('此操作将永久删除---' + val.categoryName + '---,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$request({
            url: '/category/delete/' + val.id,
            method: 'post'
          }).then(res => {
            if (res.success) {
              this.getList()
              this.$notify.success('删除成功')
            } else {
              this.$notify.warning(res.errMessage)
            }
          })
        })
        .catch(() => {

        })
    },


    add(){
      delete this.ruleForm.id
      this.ruleForm.img = '',
      this.ruleForm.categoryName = '',
      this.ruleForm.parentId = '',
      this.ruleForm.homeShow = 0,
      this.dialogTableVisible = true
    },


    handleCurrentChange(val) {
      this.pageMenu.page.page = val
      this.getList()
    },

    handlePrevClick(val) {
      this.pageMenu.page.page = val
      this.getList()
    },

    handleNextChange(val) {
      this.pageMenu.page.page = val
      this.getList()
    },

    handleSizeChange(val) {
      this.pageMenu.page.pagesize = val
      this.getList()
    },


    open() {
      this.$prompt('类目名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClick(row) {
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }

  }
}
</script>

<style>
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
